<template>
  <div class="stay-info-container ">
    <van-tabs
      v-model="active"
      color="#3378ff"
    >
      <van-tab title="工单流转">
        <WorkOrderFlow
          :workOrderFlowData="detailList"
          :typePage="$route.query.from==='other'?8: detailList.status!==4?2:8"
        />
        <template v-if="$route.query.from!=='other'">
          <div
            class="button-roam"
            v-if="detailList.status!==4"
          >
            <div
              class="edit-button-box"
              @click="onOpenEditWorkOrderManage(detailList.order_no,detailList.order_type)"
              v-if="detailList.status===1||detailList.status===2"
              v-has="'maintenanceCenter:workOrderManage:list:detail:edit'"
            >
              <i class="iconfont iconbianji color-primary"></i>
              <span>修改</span>
            </div>
            <div
              class="assign-button-box"
              @click="onOpenAssignWorkOrderManage(detailList.order_no)"
              v-if="detailList.status===1&&(customerId==='1'?true:detailList.source!==3)"
              v-has="'maintenanceCenter:workOrderManage:list:detail:assign'"
            >
              <i class="iconfont iconshangchuan color-primary"></i>
              <span>指派工单</span>
            </div>
            <div
              class="cancel-button-box"
              @click="onCancelWorkOrder()"
              v-if="detailList.status===1||detailList.status===2||detailList.status===3"
              v-has="'maintenanceCenter:workOrderManage:list:detail:cancel'"
            >
              <i class="iconfont iconcircleline-guanbi color-red"></i>
              取消工单
            </div>
            <div
              class="edit-button-box"
              @click="onOpenAgainAddWorkOrderManage(detailList.order_no,detailList.order_type)"
              v-if="detailList.status===5"
              v-has="'maintenanceCenter:workOrderManage:list:detail:rebuild'"
            >
              <i class="iconfont iconzhongxinchuangjian color-primary"></i>
              <span>重新创建工单</span>
            </div>
            <div
              class="delete-button-box"
              @click="onDeleteWorkOrder(detailList.id)"
              v-if="detailList.status===5"
              v-has="'maintenanceCenter:workOrderManage:list:detail:delete'"
            >
              <i class="iconfont iconshanchu color-red"></i>
              删除工单
            </div>
          </div>
        </template>
      </van-tab>
      <van-tab title="工单详情">
        <div class="stay-info-box">
          <div class="stay-info-content scroll-box">
            <div class="info-top-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  工单编号
                </div>
                <div class="info-content-reight">{{detailList.order_no}}</div>
              </div>
              <div class="info-content-box">
                <div class="info-content-left">
                  工单来源
                </div>
                <div class="info-content-reight">{{sourceText}}</div>
              </div>
            </div>

            <div class="info-conter-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  设备名称
                </div>
                <div class="info-content-reight">{{detailList.device_name}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备编号
                </div>
                <div class="info-content-reight">{{detailList.device_number}}</div>
              </div>
              <!-- <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备型号
                </div>
                <div class="info-content-reight">{{detailList.device_number}}</div>
              </div> -->
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  合同编号
                </div>
                <div class="info-content-reight">{{detailList.project_contract}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  产线编号
                </div>
                <div class="info-content-reight">{{detailList.product_line_number}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  产线识别号
                </div>
                <div class="info-content-reight">{{detailList.identification_number}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备地址
                </div>
                <div class="info-content-reight">{{detailList.address}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  所属公司
                </div>
                <div class="info-content-reight">{{detailList.customer}}</div>
              </div>
            </div>

            <div class="info-bottom-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  现场联系人
                </div>
                <div class="info-content-reight">{{detailList.contacts}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  联系电话
                </div>
                <div class="info-content-reight">{{detailList.contacts_tel}} <a
                    :href="'tel:'+detailList.contacts_tel"
                    class="float-tel"
                  ><i class="iconfont icondianhua color-primary"></i></a></div>
              </div>
            </div>
          </div>
          <template v-if="$route.query.from!=='other'">
            <div
              class="button-margin"
              v-if="detailList.status!==4"
            >
              <div
                class="edit-button-box"
                @click="onOpenEditWorkOrderManage(detailList.order_no,detailList.order_type)"
                v-if="detailList.status===1||detailList.status===2"
                v-has="'maintenanceCenter:workOrderManage:list:detail:edit'"
              >
                <i class="iconfont iconbianji color-primary"></i>
                <span>修改</span>
              </div>
              <div
                class="assign-button-box"
                @click="onOpenAssignWorkOrderManage(detailList.order_no)"
                v-if="detailList.status===1&&(customerId==='1'?true:detailList.source!==3)"
                v-has="'maintenanceCenter:workOrderManage:list:detail:assign'"
              >
                <i class="iconfont iconshangchuan color-primary"></i>
                <span>指派工单</span>
              </div>
              <div
                class="cancel-button-box"
                @click="onCancelWorkOrder()"
                v-if="detailList.status===1||detailList.status===2||detailList.status===3"
                v-has="'maintenanceCenter:workOrderManage:list:detail:cancel'"
              >
                <i class="iconfont iconcircleline-guanbi color-red"></i>
                取消工单
              </div>
              <div
                class="edit-button-box"
                @click="onOpenAgainAddWorkOrderManage(detailList.order_no,detailList.order_type)"
                v-if="detailList.status===5"
                v-has="'maintenanceCenter:workOrderManage:list:detail:rebuild'"
              >
                <i class="iconfont iconzhongxinchuangjian color-primary"></i>
                <span>重新创建工单</span>
              </div>
              <div
                class="delete-button-box"
                @click="onDeleteWorkOrder(detailList.id)"
                v-if="detailList.status===5"
                v-has="'maintenanceCenter:workOrderManage:list:detail:delete'"
              >
                <i class="iconfont iconshanchu color-red"></i>
                删除工单
              </div>
            </div>
          </template>
        </div>

      </van-tab>
    </van-tabs>
    <!-- 取消工单 -->
    <van-dialog
      v-model="dialogCancel"
      title="标题"
      confirmButtonColor='#3378FF'
      show-cancel-button
      @confirm='onCancelSubmit()'
    >
      <div class="dialogCancel-box">工单取消后，工单处理及流转将中止，请谨慎操作！</div>
      <div class="dialogCancel-text">取消理由</div>
      <van-field
        v-model="dialogCancelValue"
        placeholder="请输入"
        error-message=""
      />
    </van-dialog>
  </div>
</template>

<script>
import WorkOrderFlow from '../components/WorkOrderFlow.vue'; //工单流转
import { getOrderDetails, DeleteOrder, cancelOrder } from '@/api/maintenanceEngineer';
import { Tab, Tabs, Button, Dialog, Field } from 'vant';
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    WorkOrderFlow
  },
  data() {
    return {
      active: 0,
      dialogCancel: false, //取消工单弹窗
      dialogCancelValue: '', //取消工单理由
      detailList: '', //详情数据
      sourceText: '', //1直接填报  2故障记录或保养计划转换  3上报工单
      customerId: localStorage.getItem('customerIdForApp') //获取当前登录账号的公司id
    };
  },
  mounted() {
    this.onDatailList();
  },
  methods: {
    //详情接口数据
    onDatailList() {
      getOrderDetails({ id: this.$route.query.id }).then(res => {
        if (res.data.source === 2 && res.data.order_type === 1) {
          this.sourceText = '报警转工单';
        } else if (res.data.source === 2 && res.data.order_type === 2) {
          this.sourceText = '保养转工单';
        } else if (res.data.source === 1) {
          this.sourceText = '手动创建';
        } else if (res.data.source === 3) {
          this.sourceText = '上报工单';
        }
        res.data.processing_list.map(item => {
          item.operate_content = item.operate_content === '' ? [] : JSON.parse(item.operate_content);
          if (item.operate_content.length > 0) {
            item.operate_content.map((contentItem, index) => {
              if (contentItem.content.substring(0, 1) === '[') {
                //判断字符串第一个是不是[
                contentItem.content = JSON.parse(contentItem.content);
              }
            });
          }
        });
        this.detailList = res.data;
      });
    },
    //跳转修改工单页面
    onOpenEditWorkOrderManage(valCode, type) {
      this.$router.push({
        name: 'editWorkOrderManage',
        query: {
          code: valCode, //工单编号
          typeExplain: type //工单类型
        }
      });
    },
    //跳转指派工单页面
    onOpenAssignWorkOrderManage(valCode) {
      this.$router.push({
        name: 'assignWorkOrderManage',
        query: {
          code: valCode //工单编号
        }
      });
    },
    //跳转重新创建工单页面
    onOpenAgainAddWorkOrderManage(valCode, type) {
      this.$router.push({
        name: 'addWorkOrderManage',
        query: {
          code: valCode, //工单编号
          typeExplain: type //工单类型
        }
      });
    },
    //删除工单
    onDeleteWorkOrder(valIndex) {
      Dialog.confirm({
        title: '提示',
        confirmButtonText: '确认',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '取消',
        message: '工单删除后，工单相关记录都将删除，确定删除此工单？'
      })
        .then(() => {
          DeleteOrder({ id: parseInt(valIndex) }).then(res => {
            this.$router.push({
              name: 'workOrderManage',
              query: {
                // id: item
              }
            });
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //取消工单
    onCancelWorkOrder() {
      this.dialogCancelValue = '';
      this.dialogCancel = true;
    },
    //取消工单确定
    onCancelSubmit() {
      let params = {};
      params.cancel_cause = this.dialogCancelValue;
      params.id = parseInt(this.$route.query.id);
      cancelOrder(params).then(res => {
        location.reload();
        this.dialogCancel = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.stay-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;

    .van-tabs__wrap {
      flex-shrink: 0;
    }

    .van-tabs__content {
      flex: 1;
      height: 0;

      .van-tab__pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
//详情
.stay-info-content {
  flex: 1;
  padding-bottom: 0.213333rem;
}
.stay-info-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.info-top-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-conter-box {
  width: 100%;
  height: 8.56rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-bottom-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}

.info-content-box {
  width: 100%;
  height: 1.226667rem;
  display: flex;
  padding-top: 0.453333rem;
}
.info-content-left {
  width: 2.4rem;
  color: #999999;
  font-size: 0.373333rem;
  min-width: 2.4rem;
}
.info-content-reight {
  color: #333333;
  font-size: 0.373333rem;
  margin-left: 0.426667rem;
  width: 7.733333rem;
}
.info-border {
  border-bottom: 1px solid #f2f6fc;
}
.float-tel {
  float: right;
}

//按钮
.button-margin {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1.493333rem;
  padding: 0 0.426667rem;
  background-color: #fff;
  border-top: 1px solid #f2f6fc;
}
.button-roam {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1.493333rem;
  width: 100%;
  padding: 0 0.426667rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 99999;
  border-top: 1px solid #f2f6fc;
}

//操作按钮
.edit-button-box {
  color: var(--color-primary);
  font-size: 0.373333rem;
  span {
    position: relative;
    color: var(--color-primary);
    cursor: pointer;
    padding-left: 0.133333rem;
    // padding-right: 0.906667rem;
    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 0.053333rem;
    //   right: 0;
    //   width: 1px;
    //   height: 0.533333rem;
    //   background-color: #f2f6fc;
    // }
  }
}
.assign-button-box {
  color: var(--color-primary);
  font-size: 0.373333rem;
  span {
    position: relative;
    color: var(--color-primary);
    cursor: pointer;
    padding-left: 0.133333rem;
    // padding-right: 0.906667rem;
    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 0.053333rem;
    //   right: 0;
    //   width: 1px;
    //   height: 0.533333rem;
    //   background-color: #f2f6fc;
    // }
  }
}
.cancel-button-box {
  color: var(--color-red);
  font-size: 0.373333rem;
}
.delete-button-box {
  color: var(--color-red);
  font-size: 0.373333rem;
}

::v-deep .van-button {
  border-radius: 0.106667rem;
}

//取消工单
.dialogCancel-box {
  padding: 0.426667rem;
}
.dialogCancel-text {
  font-size: 0.32rem;
  color: #666666;
  padding-left: 0.426667rem;
  margin-top: 0.266667rem;
}
::v-deep .van-field__value {
  border-bottom: 1px solid #ebeef5;
}
</style>